<template>
    <div class="details">
        <section class="section1 box clmcenter">
            <nav>
                <img src="@/assets/img/logo.png" alt="logo" class="logo">
                <ul class="nav">
                    <li @click="$router.push('/index')"><a href="javascript:;">首页</a></li>
                    <li class="active"><a href="javascript:;">WORKS</a></li>
                </ul>
            </nav>
            <!-- <img src="../assets/img/cases/case1/title.png" class="case_title"> -->
            <p class="case_title">
                <span>ART REXHIBITION</span> <br>
                北京三里屯欧莱雅艺术展 <br>
                多媒体展项设置与规划
            </p>
        </section>
        <section class="section2 box">
            <img src="../assets/img/cases/case1/img1.jpg" class="img1">
        </section>
        <section class="section3 box">
            <div class="content clmcenter">
                <p class="title_en">ART REXHIBITION</p>
                <img src="../assets/img/cases/case1/img2.jpg" class="img2">
                <p class="title_zn">北京三里屯欧莱雅艺术展<br>
                    多媒体展项设置与规划</p>
            </div>
        </section>

        <Contact />
    </div>
</template>

<script setup lang='ts'>
import Contact from '@/components/Contact.vue';
</script>

<style lang="scss" scoped>
.details {
    background: url('../assets/img/bg3.jpg') no-repeat center;
    background-size: cover;
    overflow-x: hidden;

    .section1 {
        .case_title {
            // width: 86.3vw;
            margin-top: 4.5vw;
            font-size: 7.6vw;
            font-family: 'SourceHanSansCN';
            font-weight: bold;
            text-align: left;
            line-height: 1.2;
            color: transparent;
            background-clip: text;
            background-image: url('../assets/img/textbg.jpg');
            background-size: contain;

            span {
                font-family: Arial;
                font-weight: 900;
                font-size: 6.8vw;
            }
        }

    }

    .section2 {

        .img1 {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .section3 {
        min-height: 100vh;

        .content {
            width: 90vw;
            min-height: 100vh;
            margin: 0 auto;

            .title_en {
                align-self: flex-end;
                font-family: Arial;
                font-weight: bold;
                font-size: 3.6vw;
                color: #fff;
                padding-top: 6vw;
            }

            .img2 {
                width: 100%;
                margin-top: 2vw;
            }

            .title_zn {
                align-self: flex-start;
                padding-top: 2vw;
                font-size: 1.98vw;
                color: #fff;
                line-height: 1.5;
                text-align: left;
            }
        }
    }
}
</style>